import React, { useState, FC } from "react";
import { Button, Form, Input, message, FormInstance } from "antd";
import axios from "axios";
import "./Login.css";

// 定义表单字段类型 - 包含用户名和密码
interface FormValues {
  user: string;
  pwd: string;
}

// 定义API响应数据类型 - 处理登录接口返回的结构
interface ApiResponse {
  status: number;
  data?: {
    code?: number;
    message?: string;
    data?: {
      token: string;
      userInfo: {
        user: any; // 根据实际用户数据结构替换any
        role_name: string;
        user_name: string;
      };
    };
  };
}

/**
 * 登录页面组件
 * 处理用户登录表单提交和认证逻辑
 */
const Login: FC = () => {
  // 使用Form.useForm创建表单实例并指定泛型类型
  const [form] = Form.useForm<FormValues>();
  // 控制登录按钮加载状态的状态变量
  const [loading, setLoading] = useState<boolean>(false);

  /**
   * 表单提交处理函数
   * @param values - 表单提交的用户名和密码
   */
  const onFinish = async (values: FormValues) => {
    try {
      // 设置加载状态为true，禁用登录按钮
      setLoading(true);

      // 发送登录请求到后端API
      const res = await axios.post<ApiResponse>(
        "http://124.221.74.149:7001/login",
        values
      );

      console.log("完整响应:", res);

      // 检查响应状态码和业务码
      if (res.status === 200 || res.data?.code === 200) {
        // 确保响应包含所需数据
        if (res.data?.data) {
          // 将认证令牌和用户信息存储到localStorage
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem(
            "user",
            JSON.stringify(res.data.data.userInfo.user)
          );
          localStorage.setItem("role_name", res.data.data.userInfo.role_name);
          localStorage.setItem("user_name", res.data.data.userInfo.user_name);

          // 登录成功后重定向到首页
          window.location.href = "/";
        }
      } else {
        // 登录失败提示
        message.error(res.data?.message || "登录失败");
      }
    } catch (error) {
      console.error("登录错误:", error);

      // 处理Axios错误，提供更友好的错误提示
      if (error instanceof Error && "response" in error) {
        const axiosError = error as any;
        message.error(
          axiosError.response?.data?.message || "登录失败"
        );
      } else {
        message.error("登录失败");
      }
    } finally {
      // 无论成功或失败，都重置加载状态
      setLoading(false);
    }
  };

  return (
    <div className="Box">
      <div className="Login">
        {/* Ant Design表单组件，使用泛型确保类型安全 */}
        <Form<FormValues>
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          {/* 用户名输入字段，带有必填验证 */}
          <Form.Item
            label="用户名"
            name="user"
            rules={[{ required: true, message: "用户名不能为空" }]}
          >
            <Input />
          </Form.Item>

          {/* 密码输入字段，使用Password组件隐藏输入内容 */}
          <Form.Item
            label="密码"
            name="pwd"
            rules={[{ required: true, message: "密码不能为空" }]}
          >
            <Input.Password />
          </Form.Item>

          {/* 登录按钮，点击时触发onFinish回调 */}
          <Form.Item label={null}>
            <Button
              type="primary"
              htmlType="submit"
              loading={loading}
              style={{ width: "100%" }}
            >
              登录
            </Button>
          </Form.Item>

          {/* 重置按钮，点击时重置表单字段 */}
          <Form.Item label={null}>
            <Button
              style={{ width: "100%" }}
              onClick={() => form.resetFields()}
            >
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;